<template>
  <div class="rank-card__wrap">
    <div class="rank-card">
      <div class="rank-card__header">
        <yun-icon name="crown" :color="iconColor" size="26px" pb="0" style="position: absolute;left:0;right:0;margin:0 auto;top:-13px;width:42px"></yun-icon>
        <yun-avatar  :name="projectName" size="74px" border-r="4px" style="box-shadow: 0 3px 6px rgba(0,0,0,.1)"></yun-avatar>
        <p class="abs-rank">{{rank}}</p>
      </div>
      <p class="rank-card__title">{{projectName}}</p>
      <p class="rank-card__introduce">
        {{projectIntroduce}}
      </p>
      <div class="rank-card__footer">
        <div class="footer-l">
          <yun-avatar :src="src" size="20px"></yun-avatar>
          <p>{{author}}</p>
        </div>
        <p class="footer-r">
          {{hot}}°
        </p>
      </div>

    </div>

  </div>

</template>


<script>
  export default {
    name:'projectRankCard',
    data(){
      return{
        src:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
        author:'高通',
        hot:261.7,
        projectName:'项目名有',
        projectIntroduce:'基于Spring+SpringMVC+Mybatis分布式敏捷开发系统架构Mybatis分布式敏捷开发系统架构Mybatis分布式敏捷开发系统架构，提供整套公共微服务服务模块…',
        rank:1,
      }
    },
    computed:{
      iconColor(){
        if (this.rank===1) return '#FFB764'
        if (this.rank===2) return '#AEB2C7'
        if (this.rank===3) return '#E0AF77'
        if (this.rank===4) return '#CCCCCC'
        if (this.rank===5) return '#CCCCCC'
      }
    }
  }

</script>



<style lang="scss" scoped>
  .rank-card__wrap{
    .rank-card{
      width:234*$length;
      height:256*$length;
      position:relative;
      background-color: #fff;
      border-radius: 4*$length;
      border:1px solid #F4F8FA;
      @extend %animate-transition;
      @extend %cursorPointer;
      &:hover{
        box-shadow: 0 10px 20px #F4F8FA;

      }
      .rank-card__header{
        @extend %flex-column-center;
        justify-content: flex-end;
        position:absolute;
        top:-48*$length;
        width:74*$length;
        height:102*$length;
        left:0;
        right:0;
        margin: 0 auto;

        .abs-rank{
          position:absolute;
          top:12px;
          @include fontStyle(13,17,700,#fff,center)
        }


      }
      .rank-card__title{
        margin:0 auto;
        width:200*$length;
        padding-top:83*$length;
        @include fontStyle(16,21,500,#00AAE6,center);
        @extend %nowrap;
      }
      .rank-card__introduce{

        width:200*$length;
        margin:14*$length auto 0;
        @include fontStyle(13,24,500,#666,center);
        height:72*$length;
        overflow: hidden;
      }
      .rank-card__footer{
        padding:22*$length 20*$length 0;
        width:200*$length;
        @extend %flex-row-spb;
        .footer-l{
          @extend %flex-row-spb;
          p{
            margin-left:6*$length;
            @include fontStyle(13,20,500,#999,left)
          }
        }
        .footer-r{
          @include fontStyle(20,27,500,#FF7474,left)

        }
      }
    }
  }

</style>
